<template>
  <el-tag
    v-for="tag in dynamicTags"
    :key="tag"
    class="mx-1"
    closable
    :disable-transitions="false"
    @close="handleClose(tag)"
  >
    {{ tag.name }}({{ tag.school }})
  </el-tag>
  <el-input
    v-if="inputVisible"
    ref="InputRef"
    v-model="inputValue"
    class="ml-1 w-20"
    placeholder="请输入姓名"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-input
    v-if="inputVisible"
    ref="InputRef2"
    v-model="inputValue2"
    class="ml-1 w-20"
    placeholder="请输入学校"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
    + 添加
  </el-button>
</template>

<script lang="ts" setup>
import { nextTick, ref, defineProps } from 'vue'
import { ElInput } from 'element-plus'

const props = defineProps({
  list: {
    type: Array, // 参数类型
    default: [], //默认值
    required: true //是否必传
  }
})
const emit = defineEmits(['success']);
const inputValue = ref('')
const inputValue2 = ref('')
const dynamicTags = ref([])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

dynamicTags.value.push(...props.list);
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value && inputValue2.value) {
    dynamicTags.value.push({name: inputValue.value, school: inputValue2.value})
    inputVisible.value = false
    inputValue.value = ''
    inputValue2.value = ''
    emit('success', dynamicTags.value)
  } else if (inputValue.value || inputValue2.value) {

  } else {

  }

}
</script>
